<template>
  <div v-if="isCrossSectional" class="componentContainer" v-drag>
    <el-dialog
      title="横断面分析"
      style="width: 100%; pointer-events: auto"
      :modal="false"
      :close-on-click-modal="false"
      :visible.sync="isCrossSectional"
    >
      <template #title>
        <div class="custom-header drag-handle" style="font-size: 1rem; display: flex">
          <div class="bar" style="width: 5px; height: 20px; background-color: white; margin-right: 10px"></div>
          <span>横断面分析</span>
        </div>
      </template>

      <!-- 图表容器 -->
      <div ref="chartRef" style="width: 100%; height: 300px; margin-bottom: 20px; background-color: #f5f5f5;"></div>

      <!-- 表格 -->
      <el-table
        :data="tableData"
        border
        v-loading="isLoading"
        element-loading-text="正在加载数据中..."
        style="width: 100%"
      >
        <el-table-column prop="keywords" label="关键字" width="90"></el-table-column>
        <el-table-column prop="type" label="管线类型" width="200"></el-table-column>
        <el-table-column prop="pipe_dia" label="管径"></el-table-column>
        <el-table-column prop="material" label="管材"></el-table-column>
        <el-table-column prop="brl_depth" label="埋深" width="100" :formatter="formatDepth"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      isCrossSectional: this.dialogVisible, // 初始化为从父组件传来的值
      chartInstance: null, // 用于存储图表实例
    };
  },
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
    tableData: {
      type: Array,
      required: true,
    },
    isLoading: {
      type: Boolean,
      required: false,
    },
  },
  watch: {
    dialogVisible(newVal) {
      this.isCrossSectional = newVal;
      if (newVal) {
        this.$nextTick(() => {
          this.initChart();
        });
      }
    },
    tableData: {
      deep: true,
      handler() {
        this.updateChart();
      },
    },
  },
  mounted() {
    if (this.isCrossSectional) {
      this.$nextTick(() => {
        this.initChart();
      });
    }
  },
  methods: {
    initChart() {
      if (!this.$refs.chartRef) {
        console.error("Chart container not found!");
        return;
      }

      this.chartInstance = echarts.init(this.$refs.chartRef);

      const defaultOption = {
        backgroundColor: "#f5f5f5",
        title: {
          text: "横断面分析图",
          left: "center",
        },
        tooltip: {
          trigger: "item", // 仅在划过数据项时显示提示
        },
        grid: {
          left: "5%", // 调整左侧间距
          right: "5%", // 调整右侧间距
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          min: -1, // 添加一个虚拟范围
          max: 1, // 添加一个虚拟范围
          axisLine: {
            show: false, // 隐藏X轴线
          },
          axisTick: {
            show: false, // 隐藏X轴刻度
          },
          axisLabel: {
            show: false, // 隐藏X轴标签
          },
        },
        yAxis: {
          type: "value",
          min: -2.0, // 调整 Y 轴范围以适应负数埋深
          max: 0.5,
          interval: 0.2,
          axisLabel: {
            formatter: "{value} m",
          },
        },
        series: [
          {
            name: "管道",
            type: "scatter", // 使用散点图类型
            symbol: "circle", // 设置为圆形
            symbolSize: 0, // 初始时圆的大小设置为0，不显示圆
            data: [], // 初始数据为空数组，不显示圆
            itemStyle: {
              color: "#2E8B57", // 圆的颜色
              borderColor: "#000", // 边框颜色
              borderWidth: 1, // 边框宽度
            },
            tooltip: {
              formatter: function (params) {
                // 从 params.data 中直接获取埋深和管径
                const depth = Math.abs(params.data[2]); // 圆的最高点位置的绝对值（depth）
                const pipeDia = params.data[3]; // 实际管径（单位：米）

                // 返回埋深和管径信息
                return `埋深: ${depth} m<br>管径: ${pipeDia * 1000} mm`;
              },
            },
          },
          {
            name: "地面",
            type: "line",
            markLine: {
              data: [
                {
                  yAxis: 0, // 地面位置（0m）
                  lineStyle: {
                    color: "#000", // 地面线颜色
                    width: 2, // 地面线宽度
                  },
                  label: {
                    formatter: "地面", // 地面标识
                    position: "start", // 标签位置调整为起点
                  },
                },
              ],
            },
            tooltip: {
              show: false, // 禁用地面线的提示
            },
          },
        ],
      };

      this.chartInstance.setOption(defaultOption);
    },

    updateChart() {
      if (!this.tableData || this.tableData.length === 0) {
        console.warn("No data to update chart.");
        return;
      }

      // 设置埋深为 -0.5
      this.$set(this.tableData[0], 'brl_depth', -0.5);

      // 获取埋深和管径数据
      const depth = parseFloat(this.tableData[0].brl_depth); // 埋深
      const actualPipeDia = parseFloat(this.tableData[0].pipe_dia || 300) / 1000; // 实际管径（单位：米）

      // 如果管径小于 300mm，则按 300mm 绘制圆
      const displayPipeDia = actualPipeDia < 0.3 ? 0.3 : actualPipeDia;

      // 计算圆心位置：圆的最高点为埋深，圆心位置为埋深 - 管径 / 2
      const centerY = depth - displayPipeDia / 2;

      // 更新图表数据
      this.chartInstance.setOption({
        series: [
          {
            name: "管道",
            data: [[0, centerY, depth, actualPipeDia]], // [x, y, depth, actualPipeDia]
            symbolSize: displayPipeDia * 100, // 根据显示的管径调整圆的大小
          },
        ],
      });
    },

    formatDepth(row, column, cellValue) {
      return Math.abs(cellValue) + ' m';
    },
  },
  beforeDestroy() {
    if (this.chartInstance) {
      this.chartInstance.dispose(); // 销毁图表实例
    }
  },
};
</script>

<style lang="scss" scoped>
.componentContainer {
  position: absolute;
  width: 50rem;
  height: 50rem;
  top: 0;
  left: -20vw;
  pointer-events: none;
}
::v-deep .el-dialog__wrapper {
  position: absolute !important;
  pointer-events: none !important;
}
::v-deep .el-dialog {
  background-color: #285383;
  pointer-events: none !important;
  .el-dialog__header {
    pointer-events: auto;
  }
  .el-dialog__body {
    pointer-events: auto;
  }
  .el-dialog__title {
    color: white;
  }
}
</style>